<script setup >
import Button from './Button_lxw.vue';
import FileInput from './FileInput.vue';
import getRequest from '../utils/lxw_request';
import { ref, watch } from 'vue';

const props = defineProps(['confirmFunction', 'confirmParams', 'cancelFunction', 'cancelParams']);

const import_file = ref(null);


function downloadExcel() {
    const search_params = new URLSearchParams();
    search_params.set("type", 2);
    getRequest(`/gp/admin/excel/get?${search_params.toString()}`, "GET")
        .then(res => res.blob())
        .then(blob => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "example.xlsx";
            a.click();
            URL.revokeObjectURL(url);

        })
        .catch((err) => {
            console.error(err);
        })
}

function confirm() {
    if (props.confirmFunction == undefined) {
        return;
    }
    props.confirmParams === undefined ? props.confirmFunction.call({import_file}) : props.confirmFunction.call({import_file}, props.confirmParams);
}

function cancel() {
    if (props.cancelFunction === undefined) {
        return;
    }
    props.cancelParams === undefined ? props.cancelFunction.call() : props.cancelFunction.call(null, props.cancelParams);
}


</script>
<template>
    <div class="batch-import-form">
        <div class="title">批量导入</div>
        <div class="link">
            <span @click="downloadExcel" >获取导入示例表</span>
        </div>
        <FileInput v-model:file="import_file" accept=".xlsx" />
        <div class="buttons">
            <Button class="confirm" :style="{ margin: '0 15px' }" @click="confirm">确定</Button>
            <Button class="cancel" :style="{ margin: '0 15px' }" @click="cancel">取消</Button>
        </div>
    </div>
</template>
<style scoped > 
.title {
     font-size: 20px;
     margin: 15px auto;
     text-align: center;
     padding: 10px 0;
     border-bottom: 1px solid #C0C4CC;
 }

.link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
}

.link > span{
    display: inline-block;
    text-decoration: underline;
    color: #8493a6;
    cursor: pointer;
}


 .buttons {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 15px auto;
 }

 .confirm {
     width: 120px !important;
     border: none !important;
     background-color: #8493a6 !important;
     color: #FFFFFF !important;
 }

 .cancel {
     width: 120px !important;
     border: none !important;
     background-color: #939393 !important;
     color: #FFFFFF !important;
 }
</style>